<template>
	<canvas ref="chart" :style="{ 'height': height + 'px' }"></canvas>
</template>

<script setup>
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const props = defineProps([
	'data',
	'height'
])
const chart = ref()
onMounted(() => {
	initChart()
})
// onUnmounted(() => {
// 	// chart.value.destroy();
// })
function initChart() {
	let ctx = chart.value.getContext("2d");
	chart.value = new Chart(ctx, {
		type: "line",
		data: props.data,
		options: {
			layout: {
				padding: {
					top: 30,
					right: 15,
					left: 10,
					bottom: 5,
				},
			},
			responsive: true,
			maintainAspectRatio: false,
			plugins: {
				legend: {
					display: false,
				},
			},
			tooltips: {
				enabled: true,
				mode: "index",
				intersect: false,
			},
			scales: {
				y: {
					grid: {
						display: true,
						color: "rgba(0, 0, 0, .2)",
						zeroLineColor: "#000000",
						borderDash: [6],
						borderDashOffset: [6],
					},
					ticks: {
						suggestedMin: 0,
						suggestedMax: 1000,
						display: true,
						color: "#8C8C8C",
						font: {
							size: 14,
							lineHeight: 1.8,
							weight: '600',
							family: "Open Sans",
						},
					},
				},
				x: {
					grid: {
						display: false,
					},
					ticks: {
						display: true,
						color: "#8C8C8C",
						font: {
							size: 14,
							lineHeight: 1.5,
							weight: '600',
							family: "Open Sans",
						},
					},
				},
			},
		}
	});
}
</script>
